<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script>
    <link href="../css/login.css" type="text/css" rel="stylesheet">
    <link href="../css/tb.css" type="text/css" rel="stylesheet">
    <style>
        .gap{
            margin-top: 0px;
        }
    </style>
</head>
<body>
<div th:include="common/inc"></div>
<div id="main" class="main-warp">
    <div class="main-content" style="height: 700px;margin-top: 10px;margin-bottom: 10px;border-left: 2px solid gainsboro">
        <div class="formDiv">
            <h2 class="text-center">注册</h2>
            <form id="loginForm">
                <input type="hidden" name="userRole" th:value="${session.role1}">
                <div class="dataform">
                    <div class="input-warp gap">
                        <span class="input-icon iconfont icon-yonghu1"></span>
                        <input width="200px" id="userName" name="userName" type="text" class="inputs" placeholder="昵称1-7位字母汉字数字"onblur="checkName()" maxlength="64">
                        <span id="sp1"></span>
                    </div>
                    <div class="input-warp gap">
                        <span class="input-icon iconfont icon-email"></span>
                        <input width="200px" id="userMail" name="userMail" type="text" class="inputs" placeholder="有效邮箱"onblur="checkMail()" maxlength="64">
                        <span id="sp5"></span>
                    </div>
                    <div class="input-warp gap">
                        <span class="input-icon iconfont icon-dianhua1"></span>
                        <input width="200px" id="userPhone" name="userPhone" type="text" class="inputs" placeholder="有效手机号"onblur="checkPhone()" maxlength="64">
                        <span id="sp6"></span>
                    </div>
                    <div class="input-warp gap">
                        <span class="input-icon iconfont icon-baomi"></span>
                        <input width="200px" class="inputs" type="password" placeholder="密码6-9位数字" id="pwd1" onblur="checkPwd1()" maxlength="20">
                        <span id="sp2"></span>
                    </div>
                    <div class="input-warp gap">
                        <span class="input-icon iconfont icon-baomi"></span>
                        <input width="200px" class="inputs" type="password" name="userPass" placeholder="确认密码" onblur="checkPwd2()" id="pwd2" maxlength="20">
                        <span id="sp3"></span>
                    </div>
                    <div class="input-warp" style="height: 330px" onblur="checkImg()">
                        <span class="input-icon iconfont icon-tuoian"></span>
                        <input type="hidden" id="testimg" name="userImg" />
                        <input type="file" multiple class="projectfile" accept="image/*" name="img" id="headImg">
                        <span id="sp4"></span>
                    </div>
                    <div class="btn-warp gap" style="margin-top: 40px;">
                        <div class="text-center">
                            <input id="btnLogin" class="btn btn-block lgbtn blue" type="button" value="注册" onclick="regist()">
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    //昵称校验
    function checkName(){
        var reg = /^[\u4e00-\u9fa5_a-zA-Z0-9_]{1,7}$/;
        var userName = $("#userName").val();
        if(!reg.test(userName)){
            $("#sp1").html("<font color='red'>*</font>");
            return false;
        }else {
            $("#sp1").html("<font color='green'>√</font>");
            return true;
        }
    }

    //邮箱校验
    function checkMail(){
        var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
        var userMail = $("#userMail").val();
        if(!reg.test(userMail)){
            $("#sp5").html("<font color='red'>*</font>");
            return false;
        }else {
            $("#sp5").html("<font color='green'>√</font>");
            return true;
        }
    }

    //手机号校验
    function checkPhone(){
        var reg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
        var userPhone = $("#userPhone").val();
        if(!reg.test(userPhone)){
            $("#sp6").html("<font color='red'>*</font>");
            return false;
        }else {
            $("#sp6").html("<font color='green'>√</font>");
            return true;
        }
    }

    // 密码校验
    function checkPwd1() {
        let reg = /^[0-9]{6,9}$/;
        if ($("#pwd1").val() == "" || $("#pwd1").val() == null ) {
            $("#sp2").html("<font color='red'>*</font>");
            return false;
        } else if (!reg.test($("#pwd1").val())) {
            $("#sp2").html("<font color='red'>*</font>");
            return false;
        } else {
            $("#sp2").html("<font color='green'>√</font>");
            return true;
        }
    }

    // 确认密码校验
    function checkPwd2(){
        if($("#pwd2").val()=="" || $("#pwd2").val()== null){
            $("#sp3").html("<font color='red'>*</font>");
            return false;
        }
        else if($("#pwd1").val()!==$("#pwd2").val()){
            alert("两次输入密码不一致");
            $("#sp3").html("<font color='red'>*</font>");
            return false;
        }else {
            $("#sp3").html("<font color='green'>√</font>");
            return true;
        }
    }
    //头像校验
    function checkImg(){
        if($("#testimg").val()=="" || $("#testimg").val() == null){
            $("#sp4").html("<font color='red'>*</font>");
            return false;
        }else {
            $("#sp4").html("<font color='green'>√</font>");
            return true;
        }
    }

    //注册
    function regist(){
        var f1 = checkName();
        var f2 = checkPwd1();
        var f3 = checkPwd2();
        var f4 = checkImg();
        var f5 = checkPhone();
        var f6 = checkMail();

        if(f1 && f2 && f3 && f4 && f5 && f6){
            $.ajax({
                url:"/user/regist",
                type:"post",
                data:$("form").serialize(),
                success:function(){
                    alert("注册成功");
                    location.href="/login/toLogin";
                },error:function(){
                    alert("注册失败");
                }
            })
        }

    }
    //文件上传插件
    $('#headImg').fileinput({
        language: 'zh', //设置语言
        uploadUrl: '../file/upload', //上传的地址
        allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
        showUpload: true, //是否显示上传按钮
        showCaption: false,//是否显示标题
        browseClass: "btn btn-primary", //按钮样式
        dropZoneEnabled: false,//是否显示拖拽区域
        //minImageWidth: 50, //图片的最小宽度
        //minImageHeight: 50,//图片的最小高度
        //maxImageWidth: 1000,//图片的最大宽度
        //maxImageHeight: 1000,//图片的最大高度
        //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
        //minFileCount: 0,
        maxFileCount: 2, //表示允许同时上传的最大文件个数
        enctype: 'multipart/form-data',
        validateInitialCount:true,
        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",

    }).on('fileuploaded', function(event, data, previewId, index) {
        var imgval = $('#testimg').val();
        if(imgval == null || imgval == "" || imgval == undefined){
            imgval = data.response.img;
        }else{
            imgval = data.response.img;
        }
        $('#testimg').val(imgval);

    });
</script>
</html>